<template>
  <div class="recipe">
    <div class="showNull" v-if="collectionList.length==0">
      <div class="img-box">
        <img src="@/../public/images/collection/1676096515321.png" alt="">
      </div>
      <div class="text">您的菜谱收藏列表有点空</div>
    </div>
    <div class="showList" v-else>
      <RecpieRecommendItem v-for="(item,index) in collectionList" :key="item.r.id+''+index" :item="item.r"/>
    </div>
    <div class="recommend">
      <TitleItem :title="'猫乐推荐'"/>
      <div class="list">
        <RecpieRecommendItem v-for="(item,index) in recpieRecommendList" :key="item.id+''+index" :item="item"/>
      </div>
    </div>
  </div>
</template>

<script>
import RecpieRecommendItem from "@/components/collection/RecpieRecommendItem.vue";
import TitleItem from "@/components/TitleItem.vue";
  export default {
    components:{
      TitleItem,
      RecpieRecommendItem
    },
    data:()=>{
      return {
        recpieList:[1],
        offset:0,
        recpieRecommendList:[],
        collectionList:[]
      }
    },
    methods:{
      getRecpieRecommendLit(){
        this.axios.post(`${this.api.baseUrlV2}/user/ufavorites_v2/${this.offset}/10`,{},{
          headers:{
            version:this.api.version,
            'Content-Type':"application/x-www-form-urlencoded; charset=utf-8"
          }
        }).then((res) => {
          this.recpieRecommendList = res.data.result.r.recommend;
          this.collectionList = JSON.parse(localStorage.getItem("recpieList"))||[];
          console.log(this.collectionList);
        })
      }
    },
    activated(){
      this.getRecpieRecommendLit();
      console.log(1212323);
    },
  }
</script>

<style lang="scss" scoped>
.recipe{
  width: 100%;
  box-sizing: border-box;
  padding: 0.15rem;
  .showNull{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .img-box{
      width: 2.12rem;
      height: 1.9rem;
    }
    .text{
      margin-top: 0.1rem;
      font-size: 0.14rem;
      color: var(--text-gray);
    }
  }
  .showList{
    width: 100%;

  }
  .recommend{
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 0.5rem;
  }
}
</style>